<template>
  <div :class="classes"
       :style="formItemWarpStyles">
    <!--label-->
    <label :class="labelClasses"
           :style="labelStyles"
           v-if="isShowLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <Input-number v-if="!range && showInput"
                  :max="maxNumber"
                  :min="minNumber"
                  :step="step"
                  v-model="inputNumberValue[0]"
                  :disabled="disabled"
                  @change="handleInputChange" />
    <div :class="[prefixCls + '-wrap']"
         ref="slider"
         @click.self="sliderClick($event)">
      <input type="hidden"
             :name="name"
             :value="exportValue" />
      <div :class="[prefixCls + '-bar']"
           :style="barStyle"
           @click.self="sliderClick($event)"></div>
      <template v-if="showStops">
        <div :class="[prefixCls + '-stop']"
             v-for="(item, index) in stops"
             :style="{ 'left': item + '%' }"
             :key="index"
             @click.self="sliderClick($event)"></div>
      </template>
      <template v-if="markList.length > 0">
        <div v-for="(item, key) in markList"
             :key="key"
             :class="[prefixCls + '-stop']"
             :style="{ 'left': item.position + '%' }"
             @click.self="sliderClick($event)"></div>
        <div :class="[prefixCls + '-slider-marks']">
          <SliderMarker v-for="(item, key) in markList"
                        :key="key"
                        :mark="item.mark"
                        :style="{ 'left': item.position + '%' }"
                        @click.native="sliderClick($event)" />
        </div>
      </template>
      <div :class="[prefixCls + '-button-wrap']"
           :style="{left: minPosition + '%'}"
           @touchstart="onPointerDown($event, 'min')"
           @mousedown="onPointerDown($event, 'min')">
        <Tooltip :controlled="pointerDown === 'min'"
                 placement="top"
                 :content="tipFormat(exportValue[0])"
                 :disabled="tipDisabled"
                 :always="showTip === 'always'"
                 ref="minTooltip">
          <div :class="minButtonClasses"
               tabindex="0"
               @focus="handleFocus('min')"
               @blur="handleBlur('min')"
               @keydown.left="onKeyLeft($event, 'min')"
               @keydown.down="onKeyLeft($event, 'min')"
               @keydown.right="onKeyRight($event, 'min')"
               @keydown.up="onKeyRight($event, 'min')"></div>
        </Tooltip>
      </div>
      <div v-if="range"
           :class="[prefixCls + '-button-wrap']"
           :style="{left: maxPosition + '%'}"
           @touchstart="onPointerDown($event, 'max')"
           @mousedown="onPointerDown($event, 'max')">
        <Tooltip :controlled="pointerDown === 'max'"
                 placement="top"
                 :content="tipFormat(exportValue[1])"
                 :disabled="tipDisabled"
                 :always="showTip === 'always'"
                 ref="maxTooltip">
          <div :class="maxButtonClasses"
               tabindex="0"
               @focus="handleFocus('max')"
               @blur="handleBlur('max')"
               @keydown.left="onKeyLeft($event, 'max')"
               @keydown.down="onKeyLeft($event, 'max')"
               @keydown.right="onKeyRight($event, 'max')"
               @keydown.up="onKeyRight($event, 'max')"></div>
        </Tooltip>
      </div>
    </div>
    <!--验证提示-->
    <div :class="errorTipClasses"
         :style="errorTipStyles"
         v-if="isShowMessage">{{validateMessage}}</div>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
